<template>
    <div class="row-bg">
        <vue-particles class="login-background"
                       color="#39AFFD"
                       :particleOpacity="0.7"
                       :particlesNumber="80"
                       shapeType="circle"
                       :particleSize="4"
                       linesColor="#dedede"
                       :linesWidth="1"
                       :lineLinked="true"
                       :lineOpacity="0.4"
                       :linesDistance="150"
                       :moveSpeed="3"
                       :hoverEffect="true"
                       hoverMode="grab"
                       :clickEffect="true"
                       clickMode="push">
        </vue-particles>

        <div class="login-form">


            <el-form :model="loginForm" :rules="rules" ref="loginForm" required="true">
                <h2 style="color: #b3c0d1;font-family: PingFang;font-size: 30px">欢迎访问</h2>

                <el-form-item prop="username" class="item">
                    <el-input prefix-icon="User" v-model="loginForm.username" placeholder="请输入账号" style="width: 380px; color:white"></el-input>
                </el-form-item>

                <el-form-item prop="password" class="item">
                    <el-input prefix-icon="lock" v-model="loginForm.password" placeholder="请输入密码" :type="flag? 'text':'password'" style="width: 380px;">
                        <template #suffix>
                            <el-icon class="el-input__icon">
                                <component :is="flag? `warning` : `view`" @click="flag=!flag"/>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width: 380px;" @click="submitForm('loginForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>

</template>

<script>

    import request from "@/utils/request";
    import { ElMessage } from 'element-plus'

    export default {
        name: "login",
        data() {
            return {
                flag: false,
                loginForm: {
                    username: 'admin',
                    password: '1234',
                    token: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                    ,
                },
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request.post('/login', this.loginForm).then(res => {
                            if(res.code==200){

                                const token = res.data.token;
                                sessionStorage.setItem("username", res.data.username)  // 缓存用户信息
                                sessionStorage.setItem("user",JSON.stringify(res.data.user))
                                this.$store.commit('setToken', token)
                                this.$router.push("/")
                            }
                        })

                    } /*else {
                        ElMessage.error('error submit!!');
                        return false;
                    }*/
                });
            },


            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

        },

    }
</script>

<style scoped>

    .login-background {
        /*background: linear-gradient(-180deg, #dcf2e6 0%, #ffffff 100%);*/
        background-color: #111222;
        width: 100%;
        height: 100%; /**宽高100%是为了图片铺满屏幕 */
        z-index: -1;
    }


    .item .el-form-item__label {

        color: white;
        font-weight: bold;
        font-size: 20px
    }


    .row-bg {
        height: 100%;
    }


    .login-form {
        text-align: center;
        width: 380px;
        height: 380px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }

    #particles {
        position: absolute;
    }

    /* 改变input里的字体颜色*/
    /*/deep/ input::-webkit-input-placeholder {
        color: #17a1e5;
        font-size: 15px;
    }*/


    /deep/ .el-input__inner {
        color:#C0C4CC;
        background-color: transparent !important;
    }


</style>
